<template>
  <div class="alter-self-info">
    <!-- 导航栏 -->
    <div class="nav">
      <div class="icon-wrapper" @click="back">
        <span class="icon-back"></span>
      </div>
      <div class="text" @click="alterPass = !alterPass">{{this.alterPass? '取消修改密码': '修改密码'}}</div>
    </div>
    <!-- 显示信息 -->
    <div class=show-self>
      <div class="avater">
        <img src="http://39.98.226.123/ebook/userAvater/0.jpg" alt="">
      </div>
      <div class="nickname-wrap">我的昵称：{{nickname }}</div>
      <div class="otherInfo">
        <h3>账户信息</h3>
        <div class="info-wrapper">
          账号： <div class="input-wrapper"><input type="text" v-model="form.account" @blur="thisVerifyAcount"></div>
        </div>
        <div class="info-wrapper" v-if="alterPass">
          新密码： <div class="input-wrapper"><input type="password" v-model="form.password" ref="pass"></div>
        </div>
        <div class="info-wrapper" v-if="alterPass">
          确认密码： <div class="input-wrapper"><input type="password" v-model="form.passwordOk"></div>
        </div>
        <div class="info-wrapper">
          昵称： <div class="input-wrapper"><input type="text" v-model="form.nickname"></div>
        </div>
        <div class="info-wrapper">
          绑定手机： <div class="input-wrapper"><input type="text" v-model="form.tel"></div>
        </div>
        <div class="edit"> {{tintText || '*提示：绑定手机后自动与原手机号解绑'}} </div>
        <div class="btn-wrapper">
          <button @click="alterInfo">确认修改</button>
          <button @click="cancalAlter">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { verifyAccount, setSelfInfo, getSelfInfo, verifyTel } from '../../api/store'
  export default {
    data() {
      return {
        alterPass: false,
        request: false,
        nickname: '',
        tintText: '',
        initInfo: {
          account: '',
          tel: '',
          password: '',
          passwordOk: '',
          nickname: ''
        },
        form: {
          account: '',
          tel: '',
          password: '',
          passwordOk: '',
          nickname: ''
        }
      }
    },
    methods: {
      alterInfo() {
        console.log('确认修改信息')
        const { account, tel, password, nickname } = this.form
        console.log('account:', account, tel, password, nickname)
        setSelfInfo(nickname, password, account, tel).then(res => {
          console.log(res)
          this.tintText = '修改成功'
          this.init()
        })
      },
      cancalAlter() {
        this.form = { ...this.initInfo }
      },
      back() {
        this.$router.go(-1)
      },
      submitAccountForm () {
        // 获取账号密码
        const { nickname, password } = this.form
        // 判断账号密码是否满足条件
        if (!nickname || !password) {
          // 请输入账号或者密码
          this.isFormat = false
          this.formatText = '账号或者密码不能为空'
        } else {
          // 满足条件,发起请求
          setSelfInfo(nickname, password)
          console.log('账号设置成功')
        }
      },
      // 初始化
      init() {
        getSelfInfo().then(({ result }) => {
          this.form.account = result.u_account
          this.form.tel = result.u_tel
          this.form.nickname = result.u_nickname
          this.form.avater = result.u_avater
          this.nickname = result.u_nickname
          this.initInfo.account = result.u_account
          this.initInfo.tel = result.u_tel
          this.initInfo.nickname = result.u_nickname
          this.initInfo.avater = result.u_avater
          this.request = true
        })
      },
      // 验证账号能否修改
      thisVerifyAcount() {
        const { tintText, form: { account }, initInfo } = this
        if (account === '') {
          this.tintText = '*账号不能为空喔'
        } else {
          // 请求，判断当前账号名能否修改
          verifyAccount(account).then(({ ifRegister }) => {
            if (ifRegister && account !== initInfo.account) {
              this.tintText = '*账号名已经被占用，换一个吧~'
            } else this.tintText = ''
          })
        }
      },
      // 验证电话能否修改
      thisVerifyTel() {
        const { tintText, form: { tel } } = this
        if (tel === '') {
          this.tintText = '*电话不能为空喔'
        } else {
          // 请求，判断当前账号名能否修改
          verifyTel(tel).then(({ ifRegister }) => {
            if (ifRegister && tel !== this.zhanghao) {
              this.tintText = '*账号名已经被占用，换一个吧~'
            } else this.tintText = ''
          })
        }
      }
    },
    created () {
      this.init()
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
  .edit{
    color: white;
    font-size: 12px;
    text-align: center;
    color: red;
  }
  .alter-self-info {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
    .nav {
      .icon-wrapper {
        // position: relative;
        // top: 0;
        // left: 0;
        // padding: px2rem(20) 0 0 px2rem(20);
        // box-sizing: border-box;
      }
      .text {
        margin-right: 10px;
      }
      display: flex;
      justify-content: space-between;
      line-height: 40px;
    }
    .show-self {
      .avater {
        margin: 20px auto;
        width: px2rem(150);
        height: px2rem(150);
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          vertical-align: middle;
        }
      }
      .nickname-wrap {
        border-bottom: 1px solid white;
        text-align: center;
        padding-bottom: 10px;
      }
      .otherInfo {
        h3 {
          text-align: center;
          font-weight: 600;
          // color: white;
          margin-top: px2rem(40);
        }
        .info-wrapper {
          display: flex;
          justify-content: space-between;
          margin: px2rem(20) 20px;
          .input-wrapper {
            background: white;
            input {
              background: transparent;
              border: none;
              text-indent: 10px;
            }
          }
        }
        .btn-wrapper {
          display: flex;
          justify-content: space-around;
          padding: px2rem(30) 0;
          button {
            width: px2rem(200);
            // height: px2rem(40);
            background: white;
            padding: px2rem(20) 0;
            border: none;
            outline: none;
          }
        }
      }
    }
  }
</style>
